<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <script type="text/javascript" src="${ctx}/appjs/ticket/tenantTicketType.js"></script>
    <style>
        .couponTips {
            color: #999;
        }

        .tipsLink {
            display: inline-block;
            width: 100px;
            height: 30px;
            color: #0a6aa1
        }
    </style>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>运营管理</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>赠送优惠券</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });
</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">赠送优惠券</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t layui-form" id="frmGiveAway">
                        <%--控制线--%>
                        <div class="form-group row">
                            <div class="col-sm-1"></div>
                            <div class="col-sm-8">
                                <div class="col-sm-12" style="font-size: 20px;margin-bottom: 5px">优惠券&发放对象</div>
                                <hr class="layui-bg-green col-sm-12">
                            </div>
                        </div>
                        <input type="hidden" class="form-control" id="ticketTypeId" name="ticketTypeId"
                               value="${tenantTicketType.ticketTypeId}">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">优惠券名称：</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" value="${tenantTicketType.ticketName}" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">接收目标用户：</label>
                            <div class="col-sm-2">
                                <input type="radio" class="form-control" name="userType" checked lay-filter="userType"
                                       title="手动输入用户手机号" value="0">
                            </div>
                            <div class="col-sm-2">
                                <input type="radio" class="form-control" name="userType"
                                       lay-filter="userType" title="批量导入用户手机号" value="1">
                            </div>
                        </div>

                        <div class="form-group row inputUserDiv">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-8">
                                <textarea style="width:40%; height: 10%;" name="members"
                                          onafterpaste="this.value=this.value.replace(/，/g,',')" onkeyup="this.value=this.value.replace(/，/g,',')"></textarea>
                                <p class="couponTips">输入手机号敲击回车键确定，多个输入需要用英文,分割</p>
                                <p class="couponTips">手动输入最多支持1000个号码，大批量号码建议通过文件导入形式提交</p>
                            </div>
                        </div>

                        <div class="form-group row uploadUserDiv hide">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-4">
                                <div id="">
                                    <input type="file" id="file" name="file"/>
                                    <p class="couponTips" style="margin-top: 10px"> 请上传xls、xlsx格式，号码文件 <a
                                            class="tipsLink" href="#">范例查看</a>
                                    <p class="couponTips">Excel的单元格格式请务必使用“常规”格式</p>
                                    <p class="couponTips">文件大小不可超过3M，建议单次导入</p>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <img src="${ctx}/statics/img/newEdition/uploadTips.png" class="tipsImage hide" alt="">
                            </div>
                        </div>
                        <%--控制线--%>
                        <div class="form-group row">
                            <div class="col-sm-1"></div>
                            <div class="col-sm-8">
                                <div class="col-sm-12" style="font-size: 20px;margin-bottom: 5px">数量&时间设置</div>
                                <hr class="layui-bg-green col-sm-12">
                            </div>
                        </div>
                        <%-- 上传的用户id --%>
                        <input type="hidden" id="memberIds" name="memberIds"/>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right"></label>
                            <div class="col-sm-2">
                                <input type="radio" class="form-control" name="sendType" checked lay-filter="issueType"
                                       title="单次一次性发放" value="0">
                            </div>
                            <div class="col-sm-2">
                                <input type="radio" class="form-control" name="sendType"
                                       lay-filter="issueType" title="多次按频率发放" value="1">
                            </div>
                        </div>

                        <div class="once">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label text-right">赠送数量：</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="sendCount" name="sendCount">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label text-right">定时发送</label>
                                <div class="col-sm-8">
                                    <input type="checkbox" name="sendRegularly" lay-skin="switch" lay-text="开启|关闭"
                                           lay-filter="sendRegularly">
                                    <div class="layui-unselect layui-form-switch" lay-skin="_switch">
                                        <em>OFF</em>
                                        <i></i>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row onceSendTimeDiv hide">
                                <label class="col-sm-3 col-form-label text-right"></label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="onceSendTime" id="onceSendTime">
                                </div>
                                <div class="col-sm-1">
                                    <input type="text" class="form-control" value="06:00:00" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="repeatedly hide">
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label text-right">发放频率：</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="ticketScheduleCount"
                                           name="ticketScheduleCount">
                                </div>
                                <div class="col-sm-0.5">
                                    张/
                                </div>
                                <div class="col-sm-1">
                                    <select name="schedulePeriod" id="schedulePeriod">
                                        <option value="0">日</option>
                                        <option value="1">周</option>
                                        <option value="2">月</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label text-right">发放次数：</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="sendNum" name="sendNum">
                                </div>
                            </div>
                            <div class="form-group row onceSendTimeDiv ">
                                <label class="col-sm-3 col-form-label text-right">设置首次赠送时间:</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="firstSendTime" id="firstSendTime">
                                </div>
                                <div class="col-sm-1">
                                    <input type="text" class="form-control" value="06:00:00" readonly>
                                </div>
                            </div>
                        </div>


                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">验证码：</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" autocomplete="off" id="verificationCode" name="verificationCode">
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-success" id="sendVerificationCode"
                                        onclick="giveAway.getTicketAuthCode()">获取验证码
                                </button>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-sm-3 col-sm-offset-8 text-right">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#file').change(function (event) {
        event.preventDefault();
        var files = event.target.files;
        var formData = new FormData();
        formData.append("file", files[0])
        $.ajax({
            url: prefix + "/uploadMemberMobile",
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                layer.msg("文件上传中...");
            },
            success: function (data) {
                if (data.status == "200") {
                    $("#memberIds").val(data.data)
                    layer.msg(data.message);
                } else {
                    layer.msg(data.message);
                }
            }
        })

    });


    layui.use(['form', 'jquery', 'tree', 'laydate', 'util'], function () {

        var onceSendTime = laydate.render({
            elem: '#onceSendTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            trigger: 'click',
            min: 'nowTime'
        });

        var firstSendTime = laydate.render({
            elem: '#firstSendTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            trigger: 'click',
            min: 'nowTime'
        });


        var form = layui.form;
        var $ = layui.jquery;

        //上传与输入切换
        form.on("radio(userType)", function (data) {
            if ($(this).val() == "0") {
                $(".uploadUserDiv").addClass("hide");
                $(".inputUserDiv").removeClass("hide");
            } else {
                $(".uploadUserDiv").removeClass("hide");
                $(".inputUserDiv").addClass("hide");
            }
        });


        //设置是否定时发送
        form.on("switch(sendRegularly)", function (data) {
            if (this.checked) {
                $(".onceSendTimeDiv").removeClass("hide");
            } else if (this.checked == false) {
                $(".onceSendTimeDiv").addClass("hide");
            }
        });


        //一次与多次切换
        form.on("radio(issueType)", function (data) {
            if ($(this).val() == "0") {
                $(".repeatedly").addClass("hide");
                $(".once").removeClass("hide");
            } else {
                $(".once").addClass("hide");
                $(".repeatedly").removeClass("hide");
            }
        });
        $(".tipsLink").click(function () {
            $(".tipsImage").toggleClass("hide")
        })
        // $(".tipsLink").hover(function () {
        //     $(".tipsImage").toggleClass("hide")
        // })

    })


    giveAway.init();
</script>
</body>
</html>
